<template>
  <el-container>
    <jcx-search v-model:show-search="showSearch" :show-button="false" :query-form="queryParams"
                :power="'system:log:lists'" @handle-reset-query="handleResetQuery" @handle-search="handleSearch">
      <el-col :span="12">
        <el-form-item label="日志类型" prop="type">
          <el-select placeholder="记录类型" clearable v-model="queryParams.type">
            <el-option key="1" label="登录" :value="'LOGIN'"></el-option>
            <el-option key="0" label="登出" :value="'LOGOUT'"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="记录状态" prop="enabled">
          <el-select placeholder="记录状态" clearable v-model="queryParams.status">
            <el-option key="1" label="成功" :value="true"></el-option>
            <el-option key="0" label="失败" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </jcx-search>
    <el-header>
      <div class="left-panel">
        <div class="left-panel-search" v-if="showSearch">
          <el-button type="primary" plain icon="el-icon-search" @click="handleSearch"
                     v-power="'system:info:lists'"></el-button>
          <el-button type="info" plain icon="el-icon-refresh" @click="handleResetQuery"></el-button>
        </div>
      </div>
      <div class="right-panel">
        <jcx-table-bar :column-list="columnList" v-model:config="config" v-model:show-search="showSearch"
                       @query-table="getList"></jcx-table-bar>
      </div>
    </el-header>
    <el-main class="no-padding">
      <el-table style="width: 100%" ref="table" row-key="id" v-loading="loading" :data="dataList"
                :stripe="config.stripe" :border="config.border" :size="config.size"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <template v-for="(column, index) in columnList" :key="index">
          <el-table-column v-if="!column.hide" :label="column.label" :prop="column.prop" :align="column.align"
                           :width="column.width" :fixed="column.fixed">
            <template #default="scope">
              <jcx-render-column v-if="column.render" :scope="scope" :render="column.render"></jcx-render-column>
              <span v-else>{{ scope.row[column.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-main>
    <el-footer>
      <div class="jcx-table-page">
        <div class="jcx-table-do">
          <el-button type="warning" plain icon="el-icon-edit" :disabled="single" @click="handleEditClick"
                     v-powers="['system:info:info' , 'system:info:edit']"></el-button>
        </div>
        <div class="jcx-table-pagination">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
                         :small="true" :page-sizes="[10, 20, 30, 40, 50]" v-model:currentPage="queryParams.pageNum"
                         v-model:page-size="queryParams.pageSize" @current-change="getList"
                         @update:page-size="getList"></el-pagination>
        </div>
      </div>
    </el-footer>

    <el-dialog destroy-on-close append-to-body :close-on-click-modal="false" width="1080px" :title="title"
               v-model="open" @closed="handleCancel">
      <info-form ref="tenantFormRef" :form="form"></info-form>
      <template #footer>
        <el-button plain :type="form.id ? 'warning' : 'primary'" :loading="saving" @click="handleSubmitForm"
                   v-power="'system:info:edit'">修 改
        </el-button>
        <el-button plain type="info" @click="handleCancel">取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog destroy-on-close append-to-body :close-on-click-modal="false" width="1080px" title="登录信息详情"
               v-model="detailOpen" @closed="handleDetailCancel">
      <info-detail :form="form"></info-detail>
      <template #footer>
        <el-button @click="handleDetailCancel">取 消</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import {onMounted, ref} from "vue";
import infoForm from "./form.vue";
import infoDetail from "./detail.vue";
import infoApi from "@/api/system/info";
import renderUtil from "@/utils/render";
import modal from "@/utils/modal";

// 是否显示搜索栏
const showSearch = ref(true);
// 查询条件
const queryParams = ref({
  type: null,
  status: null,
  pageNum: 1,
  pageSize: 10
});
// 分页总条数
const total = ref(0);
// 表格配置
const config = ref({
  // 表格大小
  size: "default",
  // 表格边框
  border: true,
  // 表格斑马图纹
  stripe: true
});
// 表格数据列表
const dataList = ref([]);
// 表格列数据
const columnList = ref([
  {
    label: '登录类型',
    prop: 'type',
    hide: false,
    align: 'center',
    render: (h, row) => {
      return renderUtil.renderInfoType(row.type);
    }
  },
  {
    label: 'IP地址',
    prop: 'address',
    hide: false,
    align: 'center'
  },
  {
    label: 'IP定位',
    prop: 'location',
    hide: false,
    align: 'center'
  },
  {
    label: '浏览器',
    prop: 'browser',
    hide: false,
    align: 'center'
  },
  {
    label: '操作系统',
    prop: 'system',
    hide: false,
    align: 'center'
  },
  {
    label: '状态',
    prop: 'status',
    hide: false,
    align: 'center',
    render: (h, row) => {
      return renderUtil.renderYesOrNo(row.status, '成功', '失败');
    }
  },
  {
    label: '创建时间',
    prop: 'createTime',
    hide: false,
    align: 'center'
  },
  {
    label: '备注',
    prop: 'remark',
    hide: false,
    align: 'center'
  },
  {
    label: '操作',
    prop: 'operation',
    hide: false,
    align: 'center',
    render: (h, row) => {
      return renderUtil.renderDetailOperation(row, handleDetailClick, [], handleEditClick, ['system:info:info', 'system:info:edit']);
    }
  },
]);
// 表格中被选中的数据列表
const selectList = ref([]);
// 加载动画
const loading = ref(false);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 表单组件
const tenantFormRef = ref(null);
// 保存状态
const saving = ref(false);
// 弹出层状态
const open = ref(false);
// 弹出层标题
const title = ref('新增登录日志');
// 表单数据
const form = ref({
  id: null,
  userId: null,
  type: null,
  address: null,
  location: null,
  browser: null,
  system: null,
  param: null,
  result: null,
  exception: null,
  status: null,
  jti: null,
  jwt: null,
  remark: null,
  createTime: null
});

// 弹出层状态
const detailOpen = ref(false);

// 查询按钮触发方法
const handleSearch = () => {
  getList();
}

// 重置查询条件触发按钮
const handleResetQuery = () => {
  queryParams.value = {
    name: null,
    enabled: null,
    pageNum: 1,
    pageSize: 10
  };
  handleSearch();
}

// 获取数据方法
const getList = () => {
  loading.value = true;
  infoApi.lists.get(queryParams.value).then(response => {
    dataList.value = response.data.list;
    total.value = response.data.total;
    loading.value = false;
  })
}

// 表格选中触发方法
const handleSelectionChange = (selection) => {
  selectList.value = selection.map(item => item);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}


// 详情按钮方法
const handleDetailClick = (row) => {
  const id = row.id || selectList.value[0].id;
  infoApi.info.get(id, true).then(response => {
    form.value = response.data;
    detailOpen.value = true;
  });
}

// 详情取消触发方法
const handleDetailCancel = () => {
  detailOpen.value = false;
}

// 编辑按钮方法
const handleEditClick = (row) => {
  const id = row.id || selectList.value[0].id;
  infoApi.info.get(id, true).then(response => {
    form.value = response.data;
    title.value = '编辑登录日志';
    open.value = true;
  });
}

// 重置 form
const resetForm = (formEl) => {
  form.value = {
    id: null,
    userId: null,
    type: null,
    address: null,
    location: null,
    browser: null,
    system: null,
    param: null,
    result: null,
    exception: null,
    status: null,
    jti: null,
    jwt: null,
    remark: null,
    createTime: null
  };
  if (!formEl) return;
  formEl.resetFields();
}

// 关闭弹窗
const handleCancel = () => {
  resetForm(tenantFormRef.value.getFormRef());
  open.value = false;
}

// 弹窗提交
const handleSubmitForm = () => {
  saving.value = true;
  const formRef = tenantFormRef.value.getFormRef();
  formRef.validate(valid => {
    if (valid) {
      // 修改
      infoApi.edit.put(form.value).then(response => {
        modal.message(response.message, {type: response.status ? 'success' : 'error'})
        saving.value = false;
        if (response.status) {
          handleCancel();
          handleSearch();
        }
      })
    }
  });
}

// 页面加载时触发方法
onMounted(() => {
  getList();
})
</script>

<style scoped lang="scss">
</style>
